<template>
  <div class="app-container">
    <div class="container-fluid">
      <div class="filter-container addList">
        <div style="padding-bottom: 20px" class="at">
          <h3> <span>{{ list.competition }} {{list.eventName}}</span><!--<span>{{ list.competition }}</span>--> <span>{{ list.startDate | dateFormat }}</span></h3>
        </div>
        <el-form ref="info" :model="info" :rules="rules" class="event-from">
          <!-- <el-form-item label="" prop="sport">
            <el-input v-model="info.sport" placeholder="Sport" style="width: 270px"></el-input>
          </el-form-item>

          <el-form-item label="" prop="sceneClass">
            <el-select v-model="info.sceneClass" placeholder="Class Select" style="width: 120px">
              <el-option v-for="item in CLASS_TYPE" :key="item.value" :label="item.typeName" :value="item.id" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="" prop="sport">
            <el-select v-model="info.sport" placeholder="Sport Select" style="width: 120px">
              <el-option v-for="item in SPORTS_TYPE" :key="item.value" :label="item.typeName" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="eventName">
            <el-input v-model="info.eventName" placeholder="Event" style="width: 140px" />
          </el-form-item>

          <el-form-item label="" prop="eventProject">
            <el-input v-model="info.eventProject" placeholder="項目" style="width: 260px" />
          </el-form-item>
          <el-form-item label="" prop="types">
            <el-select v-model="info.types" placeholder="Types" style="width: 120px">
              <el-option v-for="item in EVENT_TYPE" :key="item.value" :label="item.typeName" :value="item.id" />
            </el-select>
            <!-- <el-input v-model="info.types" placeholder="Types"></el-input> -->
          </el-form-item>
          <!-- <el-form-item label="">
            <el-button icon="el-icon-arrow-down" @click="sort_change({prop:'teamNumber',order:listQuery.sorting})">Teams</el-button>
          </el-form-item> -->
          <el-form-item label="" prop="participants">
            <el-input v-model="info.participants" placeholder="Number of Participants" style="width: 240px" />
          </el-form-item>
          <el-form-item label="" prop="countries">
            <el-input v-model="info.countries" placeholder="Number of Countries" style="width: 240px"></el-input>
           <!-- <el-select v-model="info.countries" placeholder="Number of Countries">
              <el-option v-for="item in EVENT_COUNTRY" :key="item.value" :label="item.typeName" :value="item.id" />
            </el-select> -->
          </el-form-item>
          <el-button type="button" class="el-button el-button--success" :loading="buttonDisable" style="height: 40px;" @click="onSubmit('info')"><span>Add</span></el-button>
        </el-form>
      </div>
      <el-table v-loading="listLoading" :data="list.sceneList" element-loading-text="Loading" border fit highlight-current-row stripe @sort-change="sort_change">
        <el-table-column prop="sportName" sortable="custom" label="sport">
          <template slot-scope="scope">
            <el-select v-if="scope.row.edit" v-model="scope.row._sport" placeholder="Sport Select" style="width: 120px">
              <el-option v-for="item in SPORTS_TYPE" :key="item.value" :label="item.typeName" :value="item.id" />
            </el-select>
            <span v-show="!scope.row.edit">{{ scope.row.sportName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="eventName" sortable="custom" label="Event">
          <template slot-scope="scope">
            <el-input v-show="scope.row.edit" v-model="scope.row._eventName" class="edit-input" size="small" />
            <router-link v-show="!scope.row.edit" tag="a" :to="'/event/addUserList?id=' + scope.row.id+'&eventId='+$route.query.id">{{ scope.row.eventName }}</router-link>
          </template>
        </el-table-column>
        <el-table-column prop="eventProject" sortable="custom" label="項目">
          <template slot-scope="scope">
            <el-input v-show="scope.row.edit"  v-model="scope.row._eventProject" class="edit-input" size="small" />
            <router-link v-show="!scope.row.edit" tag="a" :to="'/event/addUserList?id=' + scope.row.id+'&eventId='+$route.query.id">{{ scope.row.eventProject }}</router-link>
          </template>
        </el-table-column>
        <el-table-column prop="types" sortable="custom" label="Types">
          <template slot-scope="scope">

            <el-select v-show="scope.row.edit" v-model="scope.row._types" placeholder="Sport Select" >
              <el-option v-for="item in EVENT_TYPE" :key="item.value" :label="item.typeName" :value="item.id" />
            </el-select>
            <span v-show="!scope.row.edit">{{ scope.row.typeName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="participants" sortable="custom" label="Participants">
          <template slot-scope="scope">
            <el-input v-show="scope.row.edit" v-model="scope.row._participants" class="edit-input" size="small" />
            <span v-show="!scope.row.edit">{{ scope.row.participants || '-' }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="countries" sortable="custom" label="Countries">
          <template slot-scope="scope">

            <el-input v-show="scope.row.edit" v-model="scope.row._countries" class="edit-input" size="small" />
            <!-- <el-select v-show="scope.row.edit" v-model="scope.row._countries" placeholder="Participating country" size="small">
              <el-option v-for="item in EVENT_COUNTRY" :key="item.value" :label="item.typeName" :value="item.id" />
            </el-select>
 -->
            <span v-show="!scope.row.edit">{{ scope.row.countries }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="teamNumber" sortable="custom" label="Team">
          <template slot-scope="scope">

           <!-- <el-input v-show="scope.row.edit" v-model="scope.row._teamNumber" class="edit-input" size="small" /> -->
            <!-- <el-select v-model="scope.row.teamNumber" placeholder="Participating country" size="small">
                        <el-option v-for="item in EVENT_COUNTRY" :key="item.value" :label="item.typeName" :value="item.id" />
                      </el-select> -->

            <span >{{ scope.row.teamNumber }}</span>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="" width="200">
          <template slot-scope="scope">
            <EditDel :scope="scope"  @confirmEdit="confirmEdit" @del="del" />
          </template>
        </el-table-column>
      </el-table>

      <Pagination
        layout="sizes, prev, pager, next"
        :page-size="1"
        :current-page="listQuery.page"
        :total="1"
        class="pagination-container"
        :page-sizes="[25, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
    import {
        getInterList
    } from '@/api/home'

    import { addEventScene, modifyEventScene, delEventScene, getEventScene } from '@/api/event'
    import { queryAthletesList, getBelongingTypes } from '@/api/setting'

    export default {
        components: {

        },
        data() {
            return {
                list: {
                    sceneList: []
                },
                CLASS_TYPE: [],
                SPORTS_TYPE: [],
                EVENT_COUNTRY: [],
                buttonDisable: false,
                EVENT_TYPE: [],
                listLoading: true,
                link: '/event/addEdit',
                info: {
                    eventId: this.$route.query.id,
                    eventName: '',
                    eventProject: '',
                    sport: '',

                    types: '',
                    participants: '',
                    countries: ''
                },
                listQuery: {
                    keyword: '',
                    page: 1,
                    eventId: this.$route.query.id,
                    sorting: 0,
                    column: '',
                    size: ''
                },
                rules: {
                    eventName: [
                        { required: true, message: 'Event cannot be empty', trigger: 'change' }
                    ],

                    eventProject: [
                        { required: true, message: '項目 cannot be empty', trigger: 'blur' }
                    ],
                    sport: [
                        { required: true, message: 'Sport cannot be empty', trigger: 'blur' }
                    ],
                    types: [
                        { required: true, message: 'Types cannot be empty', trigger: 'blur' }
                    ],
                    participants: [
                        { required: false, message: 'Participants cannot be empty', trigger: 'blur' }
                    ],
                    countries: [
                        { required: false, message: 'Countries select', trigger: 'change' }
                    ]
                }
            }
        },
        created() {
            const query = this.$route.query
            if (query.id) {
                this.info.eventId = query.id
            }
            this.fetchData()
            // this.restaurants = this.loadAll()
        },
        methods: {
          sort_change(column) {
              this.listQuery.page = 1
              if (column.prop && column.order) {
                  this.listQuery.sorting = column.order ? column.order === 'ascending' ? 0 : 1 : !this.listQuery.sorting ? 1 : 0
                  this.listQuery.column = column.prop
                 getEventScene({ eventId: this.info.eventId, ...this.listQuery }).then(response => {
                   if (response.status === 0) {
                     this.list = response.result.matchEvent
                     this.list.sceneList = response.result.list || []
                     this.listLoading = false
                   }
                 })
              }
          },
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                              //     debugger
                       this._buttonDisable(this,'buttonDisable')

                        const params = {}; const list = this.list.sceneList
                        Object.assign(params, this.info)
                        addEventScene(params).then(response => {
                            // eslint-disable-next-line no-unused-vars
                            const data = response.result
                            this._buttonDisable(this,'buttonDisable', false)
                            //debugger
                            if (response.status === 0) {
                                // this.info = {
                                //     eventId:params.eventId,
                                //     eventName: '',
                                //     eventProject: '',
                                //     sport: '',
                                //     types: '',
                                //     participants: '',
                                //     countries: ''
                                // }
                                list.push(response.result)
                            }
                            this.$message({
                                type: response.status === 0 ? 'success' : 'warning',
                                message: response.msg
                            })
                        })
                    } else {
                        return false
                    }
                })
                // this.$message('submit!')
            },
            confirmEdit(row) {
                const list = this.list.sceneList
                const {
                    id,
                    eventId,
                    _eventName:eventName,
                    _eventProject:eventProject,
                    _sport:sport,
                    _types:types,
                    _participants:participants,
                    _countries:countries
                } = row
               // debugger
                //if (row.loading) return false
                addEventScene({ id,
                    eventId,
                    eventName,
                    eventProject,
                    sport,
                    types,
                    participants,
                    countries
                    }).then(response => {
                    if (response.status === 0) {

                        let resultLesson=response.result
                        for(var k in resultLesson ){
                          this.$set(row,k,resultLesson[k])
                        }
                        this.$message({
                            message: 'success',
                            type: 'success'
                        })
                    }
                })
            },
			del(id) {
			  debugger
			    this.$confirm('This action will permanently delete this item. Do you want to continue?', 'Tips', {
			        confirmButtonText: 'Yes',
			        cancelButtonText: 'No',
			        type: 'warning'
			    }).then(() => {
			        delEventScene({ id: id }).then(response => {
			            if (response.status === 0) {
			                this.$message({
			                    type: 'success',
			                    message: 'success!'
			                })
			                this.fetchData()
			            }
			        })
			    }).catch(() => {
			        // this.$message({
			        //     type: 'info',
			        //     message: '已取消删除'
			        // })
			    })
			},
            fetchData() {
                getEventScene({ eventId: this.info.eventId }).then(response => {
                   if (response.status === 0) {
                    this.list = response.result.matchEvent

                    this.list.sceneList = response.result.list || []
                    this.listLoading = false
                    }
                })
                getBelongingTypes({ belonging: 'EVENT' }).then(response => {
                    const data = response.result
                    this.CLASS_TYPE = data.CLASS_TYPE
                    this.EVENT_TYPE = data.CLASS_TYPE
                    this.EVENT_COUNTRY = data.EVENT_COUNTRY
                })
                getBelongingTypes({ belonging: 'MISCELLANEOUS' }).then(response => {
                    const data = response.result
                    this.SPORTS_TYPE = data.SPORTS_TYPE
                })
            },

           // pageSize变化事件
           handleSizeChange(val) {
             this.listQuery.limit = val
             this.fetchData()
           },
           // pageNum变化事件
           handleCurrentChange(page) {
               // this.trainScheduleList(page, this.activeName)
           },
           sportMedicineFormatLink(row, column) {
               return row.row.id = 1
           }
        }
    }
</script>
<style scoped="scoped" lang="scss">
   .addList{
     .event-from{
       text-align: left;
     }
     .event-from .el-input{
       margin-right:5px;
     }
      .el-form-item__content >*{
           // max-width:10% !important;
           width:100% !important;
      }
     .event-from .el-form-item{
       margin-right:0px;
        margin-bottom:30px;
       width:calc( 100% * 0.12);
       display: inline-block;
     }
     .event-from .el-input input{
       border-radius: 0;
     }
   }
  .addList .at span{color: #586982;margin-right: 20px;}
</style>
